<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

 	<!-- 引入 ECharts 文件 -->
 	<script src="${path}/static/lib/jquery-1.11.3.js"></script>
    <script src="${path}/static/lib/echarts.js"></script>
    <script src="${path}/static/lib/util.js"></script>
    <script type="text/javascript">
    
    	$(function() {
    		// 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

    	    $.ajax({
    	    	url: "${path}/category/getCategoryProductCount.action",
    	    	type: "post",
    	    	dataType: "json",
    	    	success: function(jsonObj) {
    	    		if (jsonObj.code === util.SUCCESS) {
    	    			var data = jsonObj.data;
    	    			// List<CategoryCount> list;
    	    			// x轴数据，存放分类的名字
    	    			var xArray = new Array();
    	    			// y轴数据，存放商品数量
    	    			var yArray = new Array();
    	    			for (var i = 0; i < data.length; i++) {
    	    				xArray.push(data[i].name);
    	    				yArray.push(data[i].count);
    	    			}
        	            var option = {
        	                title: {
        	                    text: '分类下面商品数量'
        	                },
        	                tooltip: {},
        	                legend: {
        	                    data:['数量']
        	                },
        	                xAxis: {
        	                    data: xArray
        	                },
        	                yAxis: {},
        	                series: [{
        	                    name: '数量',
        	                    type: 'bar',
        	                    data: yArray
        	                }]
        	            };

        	            // 使用刚指定的配置项和数据显示图表。
        	            myChart.setOption(option);
    	    		}
    	    		
    	    	}
    	    });
    		
            
    	});
    
        
    </script>
</body>
</html>